<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    input{
      width: 300px;
      height: 30px;
      line-height: 30px;
      padding: 5px;
      border-radius: 4px;
      border: 1px solid #555;
      color: gray;
    }
  </style>
</head>
<body>
  <input id="myInput" value="请输入搜索关键字">
</body>
<script>
  /*
  1、获得焦点时，如果内部内容为提示语 请输入搜索关键字 ，清空内容并且设置文字颜色为黑色；
  2、失去焦点时，如果内容为空，恢复默认提示语，并且设置文字颜色为灰色
  */
 var tip = '请输入搜索关键字';
  var myInput = document.getElementById("myInput");
  myInput.onfocus = function(){
    var html = myInput.value;
    if(html === tip){
        myInput.value = '';
        myInput.style.color = '#000';
    }
  }
  myInput.onblur = function(){
    var html = myInput.value;
    if(!html || html === ''){
        myInput.value = tip;
        myInput.style.color = 'gray';
    }
  }


</script>
</html>